<template>
    <div class="root">
        <div class="weather-icon" :data-weather="$props.data?.now?.text"></div>
        <div class="info">
          <div>
            <slot name="temp" :data="$props.data?.now">
                {{$props.data?.now?.temp}} °C
            </slot>
        </div>
          <div>
            <slot name="text" :data="$props.data?.now">
                {{$props.data?.now?.text}}
            </slot>
          </div>
        </div>
    </div>
</template>
<script setup lang="ts">
defineProps(['data', ''])
</script>
<style scoped lang="scss">
.root {
    display: flex;
    gap: 4px;
    width: 100%;

    .info {
        display: flex;
        flex-direction: column;
    }
}
</style>